<template>
  <van-tabs v-model:active="tagActiveName" @change="changeTeamModel">
    <van-tab title="推荐的队伍" name="recommend">
      <van-tabs v-model:active="tagActiveNameStatus" @change="changeTeamStatus">
        <van-tab title="公开" name="public">
        </van-tab>
        <van-tab title="加密" name="password">
        </van-tab>
        <van-tab title="私有" name="private" v-if="1 === user?.userRole">
        </van-tab>
      </van-tabs>
      <!-- 推荐队伍页面/可以进行查询 -->
      <van-search v-model="searchKeyWord" placeholder="请输入搜索关键词" @search="searchTeam"/>
      <TeamRecommendPage :team-list-recommended="teamList"></TeamRecommendPage>
    </van-tab>
    <van-tab title="加入的队伍" name="join">
      <!-- 加入的队伍 -->
      <TeamMyJoinPage :team-list-join="teamList"></TeamMyJoinPage>
    </van-tab>
    <van-tab title="创建的队伍" name="create" >
      <!-- 创建的队伍 -->
      <TeamMyCreatePage :team-list-create="teamList"></TeamMyCreatePage>
    </van-tab>
  </van-tabs>



  <!--  加入队伍的浮窗 -->
  <van-floating-bubble
      :offset="offset"
      axis="xy"
      icon="flag-o"
      magnetic="x"
      @click="onClickAddTeam"
  />


</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getTeamCreate, getTeamInfoAndSearch, getTeamJoin} from "../api/teamApi.ts";
import TeamRecommendPage from "../components/TeamRecommendPage.vue";
import TeamMyCreatePage from "../components/TeamMyCreatePage.vue";
import TeamMyJoinPage from "../components/TeamMyJoinPage.vue";
import {userStore} from "../stores/user/user.ts";


//存储仓库对象
// let teamStoreData = teamStore();


const offset = ref({ x: 10, y: 500 });
const router = useRouter();


//添加队伍的按钮
const onClickAddTeam = () => {
  //跳转到我们的添加队伍的页面
  router.push("/team/add");
};
const searchKeyWord = ref('');

const tagActiveName = ref('recommend');
const tagActiveNameStatus = ref('public');


//请求查询队伍的参数(状态)
const teamData = {
  keyword: "",
  maxNum: 0,
  page: 1,
  pageNum: 10,
  status:0,
}
const searchTeamData = ref({...teamData});
const userStoreAPI = userStore();
const teamList = ref([]);
const user = ref();



//队伍类型监听监听
const changeTeamModel = (name:string)=>{
  if ('recommend' === name){
    if ('public' === tagActiveNameStatus.value){
      recommendList(0);
    }else if ('password' === tagActiveNameStatus.value){
      recommendList(2);
    }else if('private' === tagActiveNameStatus.value){
      recommendList(1);
    }
  }else if ('join' === name){
    joinList();
  }else if('create' === name){
    createList();
  }
}

//队伍状态监听
const changeTeamStatus = (name:string)=>{
  if ('public' === tagActiveNameStatus.value){
    recommendList(0);
  }else if ('password' === tagActiveNameStatus.value){
    recommendList(2);
  }else if('private' === tagActiveNameStatus.value){
    recommendList(1);
  }
}

//查询按钮
const searchTeam = ()=>{
  searchTeamData.value.keyword = searchKeyWord.value;
  if ('public' === tagActiveNameStatus.value){
    recommendList(0);
  }else if ('password' === tagActiveNameStatus.value){
    recommendList(2);
  }else if('private' === tagActiveNameStatus.value){
    recommendList(1);
  }
};


//挂载
onMounted(()=>{
  //获取队伍信息//一开始默认公开的队伍查询
  getTeamInfoAndSearch(searchTeamData.value).then(res =>{
    if (res.code == 200){
      // teamStoreData.setTeamRecommendList(res.data);//公共仓库存储信息
      // teamRecommendList.value = res.data;
      teamList.value = res?.data;
    }
  }).catch(error =>{
    console.log(error);
  });

  //获取当前用户信息
  user.value = userStoreAPI.getCurrentUser();
});


//获取推荐的队伍列表
const recommendList = (status:any)=>{
  searchTeamData.value.status = status;//设置队伍状态
  //获取队伍信息
  getTeamInfoAndSearch(searchTeamData.value).then(res =>{
    if (res?.code == 200){
      // teamStoreData.setTeamRecommendList(res.data);//公共仓库存储信息
      // teamRecommendList.value = res.data;
      teamList.value = res?.data;
    }
  }).catch(error =>{
    console.log(error);
  });
}

//获取加入的队伍列表
const joinList = ()=>{
  //获取用户加入的队伍信息
  getTeamJoin().then(res =>{
    if (res.code == 200){
      // teamStoreData.setTeamJoinList(res.data);//公共仓库存储信息
      // teamJoinList.value = res.data;
      teamList.value = res?.data;
    }
  }).catch(error =>{
    console.log(error);
  });
}

//获取加入的队伍列表
const createList = ()=>{
  //获取创建的队伍信息
  getTeamCreate().then(res =>{
    if (res.code == 200){
      // teamStoreData.setTeamCreateList(res.data);//公共仓库存储信息
      // teamCreateList.value = res.data;
      teamList.value = res?.data;
    }
  }).catch(error =>{
    console.log(error);
  });
}



</script>

<style scoped>
#vanCard :deep(.van-card__thumb){
    height: 75px;
    width: 75px;
}
</style>